<template>
  <div class="dashboard-container">
<!--    待处理任务-->
    <div class="pendingTasks" style="margin: 10px;border: 1px solid black;width: 42%; height: 400px">
      <p style="font-size: 15px;border-bottom: black 1px solid;height: 25px;padding-left: 10px">
        <span>待处理任务</span>
        <span>
          <router-link style="float: right; margin-right: 10px" to="/aListOfPendingTasks">更多></router-link>
        </span>
      </p>
      <template>
        <el-table :data="tableData" height="340">
          <el-table-column label="任务名称">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.reason }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px" v-if="scope.row.status === false">待审核</span>
                <span style="margin-left: 10px" v-else>审核完成</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
                <el-button v-if="scope.row.status === false" size="small" @click="audit(scope.row.leaveID, true)">
                  审核
                </el-button>
                <el-button style="float: right;margin-right: 30px" size="small"
                           @click="lookAt(scope.row.leaveID,true)">
                  查看
                </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

<!--    通知公告-->
    <div class="notificationAnnouncement" style="margin: 10px;border: 1px solid black;width: 42%;height: 400px">
      <p style="font-size: 15px;border-bottom: black 1px solid;height: 25px;padding-left: 10px">
        <span>通知公告</span>
        <span>
          <router-link style="float: right; margin-right: 10px" to="/listOfNotificationAnnouncements" >更多></router-link>
        </span>
      </p>
      <template style="margin:10px;">
        <el-table :data="announcements" height="340" style="width: 100%; margin: auto;" >
          <el-table-column label="标题">
            <template #default="scope">
              <div style="display: flex; align-items: center" @click="lookAtAnnouncements(scope.$index,true)">
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="日期"
            sortable
            prop="postDate"/>
        </el-table>
      </template>
    </div>
<!--    我的便签-->
    <div class="notes" style="margin: 10px;border: 1px solid black;width: 42%;height: 400px">
      <p style="font-size: 15px;border-bottom: black 1px solid;height: 25px;padding-left: 10px">
        <span>我的便签</span>
        <span>
          <span style="float: right; margin-right: 10px" @click="addNotesVisible = true">添加</span>
        </span>
      </p>
      <template style="margin:10px;">
        <el-table :data="notesList" style="width: 100%; margin: auto;" :show-header="false">
          <el-table-column >
            <template #default="scope">
              <div style="display: flex; align-items: center" @click="updateMyNotesById(scope.$index, true)">
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

<!--    常用工具-->
    <div class="commonlyUsedTools" style="margin: 10px;border: 1px solid black;width: 42%;height: 400px">
      <p style="font-size: 15px;border-bottom: black 1px solid;height: 25px;padding-left: 10px">
        <span>常用工具</span>
      </p>

      <router-link to="/frequentlyUsedURLs">
        <div class="icon-function">
          <svg t="1734520179892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23465" width="64" height="64">
            <path d="M511.163 62.422c-242.734 0-439.51 196.775-439.51 439.51s196.776 439.51 439.51 439.51 439.51-196.776 439.51-439.51-196.776-439.51-439.51-439.51zM548.7 93.559s27.53-15.968 37.11-6.388c9.58 9.58 43.113-1.596 129.338 49.5 0 0-18.99 20.252-23.143 19.037 2.424 4.403 9.876 17.825 15.159 26.122 6.387 10.03 7.984 10.728 7.984 10.728l-6.388 9.58 6.388 1.596c-6.388-1.596-9.58 17.564-18.825 20.758-9.244 3.194 2.857 20.758-0.336 23.951-3.193 3.194 1.597 31.936 0 48.865-1.596 16.93-7.983 2.231-15.967 0-7.984-2.23-20.758-7.35-21.85-12.14-1.094-4.79-3.698-19.16-0.505-27.144 3.193-7.984-9.58-15.968-15.968-21.823-6.388-5.856-31.935 1.065-36.726 0-4.79-1.066-7.983-14.903-7.983-27.677s22.355 1.597 34.936 0c12.582-1.596 14.564-33.431 14.564-33.431l-0.723-27.062c-5.162-2.064-6.005-4.74 2.32-8.168 0 0-27.146-6.387-33.532 7.984-6.388 14.372-9.58 12.976-11.178 27.246-1.596 14.27-26.613 1.697-32.467 0-5.855-1.698-21.823-20.86-21.823-20.86 4.79-11.177 7.983-19.16 7.983-19.16l-8.368-19.16V93.559zM296.797 242.058c2.708-3.614 20.757-35.13 43.113-25.548 22.355 9.58 36.725-11.177 36.725-11.177s32.823-33.532 34.774-28.742l1.951 4.79c-1.951-4.79 27.146-12.774 30.338 3.194 3.194 15.967 22.356 24.001 22.356 24.001s-11.178 19.112-7.984 33.482c3.193 14.371 14.371 17.564 7.984 30.339-6.388 12.774-19.162 17.564-22.356 23.951-3.193 6.388-29.451-20.757-32.29-30.339-2.839-9.58-16.868-19.16-29.015-15.967-12.146 3.194-44.082 11.177-50.468 7.984-6.387-3.194-42.61-5.986-35.128-15.968zM724.73 711.507c-12.774 33.532-43.113 91.016-59.08 106.983-15.968 15.968-35.13 46.307-49.5 57.484-14.371 11.177-14.371 31.935-31.935 30.339-17.564-1.597-38.323-51.097-33.532-63.871 4.79-12.774-87.822-35.13-87.822-35.13s-39.92-4.79-47.903-81.434c-1.422-13.64-2.334-23.32-2.879-30.043-11.998-5.302-59.06-24.783-88.137-17.86-33.532 7.984-41.516-10.653-70.258-14.907l-49.5-45.77s-81.434-94.21-71.854-110.177c9.58-15.968 9.58-59.08 11.177-68.66 1.597-9.581-12.744-70.26-11.961-78.243 0.784-7.984-11.99-38.323-11.99-38.323s30.339-63.87 35.129-63.87 22.355 54.29 39.92 55.886c17.563 1.597 65.466-1.596 72.652-9.58 7.186-7.984 13.572-17.564 21.556-17.564 7.984 0 7.984-4.79 22.355 1.597 14.371 6.387 30.339 15.967 36.725 25.547 6.388 9.58-4.79 28.742 28.742 28.742s33.532-7.984 38.323 14.371c4.79 22.356 10.467 71.855-3.548 75.049-14.016 3.193-55.532 51.804-52.338 67.418 3.194 15.614 3.194 39.565-3.194 53.936-6.387 14.37-11.177 19.16-35.129 17.564-23.951-1.597-44.2-14.372-50.842 4.79-6.642 19.161-19.348 62.327 2.94 57.969 0 0 35.128-10.692 47.902 0 12.774 10.692 94.21 45.82 94.21 45.82s73.45-79.838 188.418-28.741l19.162 12.774 31.935-6.943s41.515-12.219 55.887-9.025l14.371 3.194v-6.388c-0.002 0.002 12.772 33.534-0.002 67.066z m186.822-182.031s-9.58-14.371-9.58-29.487-11.178-13.626-11.178-32.786c0-19.162-14.371-12.774-23.951-25.548s-14.372 4.79-22.355 6.387c-7.984 1.597-6.388 14.372-14.372 29.54-7.984 15.17-28.741 24.75-35.129 21.911-6.387-2.84-30.339-24.305-31.935-29.097-1.597-4.79-33.532-31.935-32.646-38.322 0.887-6.388-8.87-39.92-15.257-55.887-6.388-15.968 0-78.877 0-78.877-9.58-5.424 87.822-45.672 75.048-50.462-12.774-4.79-19.161-57.483-19.161-57.483l46.483 23.951c46.484 23.952 105.21 213.968 105.21 213.968v54.29l-11.177 47.902z" p-id="23466"></path>
          </svg>
          <br>
          常用网址
        </div>
      </router-link>
      <router-link to="/calendarView">
        <div class="icon-function">
          <svg t="1734521333820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56000" width="64" height="64"><path d="M796.791741 487.401766l99.05297 0 0 55.481615-99.05297 0 0-55.481615ZM519.382641 751.408625l55.481615 0 0 99.05297-55.481615 0 0-99.05297ZM803.820218 297.65201l-70.039632 70.039632-39.23105-39.23105 70.039632-70.039632 39.23105 39.23105ZM764.592611 771.876269l-70.039632-70.039632 39.23105-39.23105 70.039632 70.039632-39.23105 39.23105ZM388.881424 664.954601l131.559315-131.612527L520.440739 267.336698l84.127026 0 0 299.284317c-5.849218 5.849218-156.153456 157.846004-156.153456 157.846004L388.881424 664.954601zM570.04653 54.625108l0 79.81379c206.260667 0 374.085954 167.825286 374.085954 374.117676 0 206.281133-167.825286 374.107443-374.085954 374.107443-189.280948 0-346.091366-141.384078-370.630249-324.072887l56.933687 56.158021 56.44557-56.44557L156.845721 402.354787 0.491697 558.314839l56.44557 56.44557 61.48433-61.48433c22.539342 229.363851 216.477356 409.214009 451.646424 409.214009 250.265904 0 453.911-203.63384 453.911-453.921233C1023.956507 258.270205 820.3329 54.625108 570.04653 54.625108z" fill="#2c2c2c" p-id="56001"></path></svg>
          <br>
          日历查询
        </div>
      </router-link>
      <div class="icon-function">
        <svg t="1734521333820" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="56000" width="64" height="64"><path d="M796.791741 487.401766l99.05297 0 0 55.481615-99.05297 0 0-55.481615ZM519.382641 751.408625l55.481615 0 0 99.05297-55.481615 0 0-99.05297ZM803.820218 297.65201l-70.039632 70.039632-39.23105-39.23105 70.039632-70.039632 39.23105 39.23105ZM764.592611 771.876269l-70.039632-70.039632 39.23105-39.23105 70.039632 70.039632-39.23105 39.23105ZM388.881424 664.954601l131.559315-131.612527L520.440739 267.336698l84.127026 0 0 299.284317c-5.849218 5.849218-156.153456 157.846004-156.153456 157.846004L388.881424 664.954601zM570.04653 54.625108l0 79.81379c206.260667 0 374.085954 167.825286 374.085954 374.117676 0 206.281133-167.825286 374.107443-374.085954 374.107443-189.280948 0-346.091366-141.384078-370.630249-324.072887l56.933687 56.158021 56.44557-56.44557L156.845721 402.354787 0.491697 558.314839l56.44557 56.44557 61.48433-61.48433c22.539342 229.363851 216.477356 409.214009 451.646424 409.214009 250.265904 0 453.911-203.63384 453.911-453.921233C1023.956507 258.270205 820.3329 54.625108 570.04653 54.625108z" fill="#2c2c2c" p-id="56001"></path></svg>
        <br>
        日程管理
      </div>
    </div>

<!--    查看任务-->
    <el-dialog
      title="任务明细"
      :visible.sync="lookAtDialogVisible"
      width="60%"
      :append-to-body="true">
      <div>
        <table width="100%">
          <tr>
            <th colspan="2" style="float: left">详细</th>
          </tr>
          <tr>
            <td>
              <p>姓名：<span>{{pendingTasksObj.users.userName}}</span></p>
            </td>
            <td>
              <p>部门：<span>{{pendingTasksObj.users.department.deptName}}</span></p>
            </td>
          </tr>
          <tr>
            <td>
              <p>开始时间：<span>{{pendingTasksObj.startDate}}</span></p>
            </td>
            <td>
              <p>结束时间：<span>{{pendingTasksObj.endDate}}</span></p>
            </td>
          </tr>
          <tr>
            <td>
              <p>请假天数：<span>{{dateDiffer(
                pendingTasksObj.startDate,
                pendingTasksObj.endDate
              )}}</span> 天</p>
            </td>
            <td>
              <p>请假事由：<span>{{pendingTasksObj.reason}}</span></p>
            </td>
          </tr>
          <tr>
            <th colspan="2" style="float: left">审批信息</th>
          </tr>
          <tr>
            <td>
              <p>审批人：<span>{{pendingTasksObj.users.department.manager}}</span></p>
            </td>
            <td>
              <p>审批时间：<span>{{pendingTasksObj.approvalDate}}</span></p>
            </td>
            <td>
              <p>审批结果：<span>{{pendingTasksObj.approved===true? "审批通过": pendingTasksObj.approved === null ? "":"驳回"}}</span></p>
            </td>
          </tr>
          <tr v-if="!pendingTasksObj.approved">
            <td>
              <p>审批信息：<span>{{pendingTasksObj.remarks}}</span></p>
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
<!--    审核任务 -->
    <el-dialog
      title="审核"
      :visible.sync="auditDialogVisible"
      width="60%"
      :append-to-body="true">
      <div>
        <form action="">
          <table width="100%">
            <tr>
              <th colspan="2" style="float: left">详细</th>
            </tr>
            <tr>
              <td>
                <p>姓名：<span>{{pendingTasksObj.users.userName}}</span></p>
              </td>
              <td>
                <p>部门：<span>{{pendingTasksObj.users.department.deptName}}</span></p>
              </td>
            </tr>
            <tr>
              <td>
                <p>开始时间：<span>{{pendingTasksObj.startDate}}</span></p>
              </td>
              <td>
                <p>结束时间：<span>{{pendingTasksObj.endDate}}</span></p>
              </td>
            </tr>
            <tr>
              <td>
                <p>请假天数：<span>{{dateDiffer(
                  pendingTasksObj.startDate,
                  pendingTasksObj.endDate
                )}}</span> 天</p>
              </td>
              <td>
                <p>请假事由：<span>{{pendingTasksObj.reason}}</span></p>
              </td>
            </tr>
            <tr>
              <th colspan="2" style="float: left">操作</th>
            </tr>
            <tr>
              <td>
                <el-form ref="form" :model="form" label-width="100px">
                  <el-form-item label="领导人：">
                    <el-select v-model="form.deptId" placeholder="-请选择-">
                      <el-option v-for="item in leadershipAll" :key="item.deptID"
                                 :label="item.manager" :value="item.deptID"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="审核状态：">
                    <el-radio-group v-model="form.approvalResult">
                      <el-radio label="1">通过</el-radio>
                      <el-radio label="0">驳回</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="审批意见：">
                    <el-input type="textarea" v-model="form.remarks"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                  </el-form-item>
                </el-form>
              </td>
            </tr>
          </table>
        </form>
      </div>
    </el-dialog>
<!--    编辑我的我的便签-->
    <el-dialog
      title="编辑我的便签"
      :visible.sync="updateNotesVisible"
      width="40%"
      :append-to-body="true">
      <div>
        <el-form ref="form" :model="updateNotes" label-width="80px">
          <el-form-item label="便签标题">
            <el-input v-model="updateNotes.title"></el-input>
          </el-form-item>
          <el-form-item label="便签内容">
            <el-input type="textarea" v-model="updateNotes.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit2(updateNotes)">保存</el-button>
            <el-button @click="updateNotesVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
<!--    新增我的我的便签-->
    <el-dialog
      title="新增我的便签"
      :visible.sync="addNotesVisible"
      width="40%"
      :append-to-body="true">
      <div>
        <el-form ref="form" :model="addNotes" label-width="80px">
          <el-form-item label="便签标题">
            <el-input v-model="addNotes.title"></el-input>
          </el-form-item>
          <el-form-item label="便签内容">
            <el-input type="textarea" v-model="addNotes.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit3(addNotes)">保存</el-button>
            <el-button @click="addNotesVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
<!--    查看通知公告的内容-->
    <el-dialog
      :title="announcement.title"
      :visible.sync="announcementVisible"
      width="40%"
      :append-to-body="true">
      <div>
        {{announcement.content}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pendingTasksAxios from '@/api/myDesktop/pendingTasks/pendingTasks'
import {addNotes, getNotesAll, updateNotesById} from '@/api/myDesktop/myNotes/Notest'
import Cookies from "js-cookie";
import {getAnnouncementList} from "@/api/table";

export default {
  data() {
    return {
      tableData: [{
        leaveID: null,
        startDate: null,
        reason: null,
        approvalDate: null,
        users: {
          userName: null,
        },
      }],
      total: 0, // 总数量
      pageNum: 1, // 当前页
      pageSize: 5, // 每页显示数量
      pages: 0, // 总页数
      status: 1,
      dateRange: [],
      notesList: [],
      announcements: [],
      pendingTasks: {},
      updateNotes: {},
      addNotes: {
        userID: null,
        title: null,
        content: null,
      },
      announcement: {},
      pendingTasksObj: {
        leaveID: null,
        userID: null,
        startDate: null,
        endDate: null,
        leaveType: null,
        reason: null,
        approved: null,
        status: null,
        approvalDate: null,
        users: {
          userID: null,
          userName: null,
          status: null,
          department: {
            deptName: null,
            manager: null,
          }
        },
      remarks: null
      },
      form: {
        deptId: 1,
        approvalResult: null,
        remarks: null
      },
      lookAtDialogVisible: false, // 查看任务处理的显示状态
      auditDialogVisible: false, // 审核的显示状态
      updateNotesVisible: false,
      addNotesVisible: false,
      announcementVisible: false,
      leadershipAll: [{
          deptID: null,
          deptName: null
        }],
    }
  },
  created() {
    this.getData()
    this.getMyNotesAll()
    this.getAnnouncementsAll()
  },
  methods: {
    getData: function() {
      pendingTasksAxios.getPendingTasksList(this.pageNum, this.pageSize, this.status, this.dateRange)
        .then(data => {
          this.tableData = data.data.list
          this.total = data.data.total
          this.pages = data.data.pages
        })
        .catch((error) => {
          console.log('查询数据时异常：' + error)
        })
    },
    lookAt: function(id, boolean) {
      this.lookAtDialogVisible = boolean
      pendingTasksAxios.getPendingTasksListById(id, 1).then((data) => {
        this.pendingTasksObj = data.data
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    audit: function(id, boolean) {
      this.getLeadershipById();
      this.auditDialogVisible = boolean
      pendingTasksAxios.getPendingTasksListById(id, 1).then((data) => {
        this.pendingTasksObj = data.data
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    //创建方法er
    dateDiffer: function(createdDate, dueDate){
      //date1结束时间
      let date1 = new Date(dueDate);
      //date2开始时间
      let date2 = new Date(createdDate);
      date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
      date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
      const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
      const diffDate = diff / (24 * 60 * 60 * 1000);  //计算当前时间与结束时间之间相差天数
      return diffDate;
    },
    getLeadershipById: function() {
      let users = JSON.parse(Cookies.get("SET_USERS"));
      console.log("users: ",users.userID);
      pendingTasksAxios.getLeadersAll(users.userID).then(data => {
        this.leadershipAll = data.data
      })
    },
    onSubmit: function() {
      if (this.form.approvalResult === "0"){
        this.form.approvalResult = false
      }else {
        this.form.approvalResult = true
      }
      pendingTasksAxios.updatePendingTasksById(this.pendingTasksObj.leaveID, this.form).then(res => {
        if (res.data === true) {
          this.$message.success("审核通过")
          this.auditDialogVisible = false
          location.reload();
        }else{
          this.$message.error("审核失败!!!")
        }
      })
    },
    onSubmit2: function(notes) {
      updateNotesById(notes).then((res) => {
        if (res.data === true) {
          this.$message.success("修改成功")
          this.updateNotesVisible = false
        }else {
          this.$message.error("修改失败!!!");
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    onSubmit3: function(notes) {
      let user = JSON.parse(Cookies.get("SET_USERS"));
      notes.userID = user.userID;
      console.log(notes)
      addNotes(notes).then((res) => {
        if (res.data === true) {
          this.$message.success("新增成功")
          location.reload();
        }else {
          this.$message.error("新增失败!!!");
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    getMyNotesAll: function(){
      let users = JSON.parse(Cookies.get("SET_USERS"));
      getNotesAll(users.userID).then(data => {
        if (data!==null) {
          this.notesList = data.data
        }
      })
    },
    updateMyNotesById: function(id, boolean) {
      this.updateNotesVisible = boolean;
      this.updateNotes = this.notesList[id]
    },
    getAnnouncementsAll: function(){
      getAnnouncementList(this.pageNum,this.pageSize).then(data => {
        if (data !== null) {
          this.announcements = data.data.list
        }
      })
      console.log(this.announcements)
    },
    lookAtAnnouncements: function(id, boolean) {
      this.announcementVisible = boolean;
      this.announcement = this.announcements[id]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &>div{
    display: inline-block;
  }
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.dashboard-container>div {
  float: left;
}
.icon-function>* {
  margin: 0 auto;
  text-align: center;
  display: inline-block;
}
.icon-function {
  display: inline-block;
  margin: 0 50px;
}
.commonlyUsedTools {
  margin: 0 auto;
}
</style>
